@charset "utf-8";
/* CSS Document */
* {padding:0; margin:0; box-sizing: border-box; }
html {width:100%; height:100%;}
body {width:100%; height:100%; background:radial-gradient(circle at 50% -20%, #aaa, #eee);}
img {border:none}
input,textarea,button,select,li,a {outline:none;-webkit-tap-highlight-color: transparent}
a {text-decoration:none;-webkit-tap-highlight-color:transparent}
ol,ul,li {list-style:none;}
.clearfix:after {content:" "; display:block; height:0; clear:both;}
.clearfix {*zoom: 1;}
@font-face {
	font-family: 'Barlow';
	src: local('Barlow Regular'), local('Barlow-Regular'), url('../fonts/Barlow-Regular.woff') format('woff');
	font-style: normal;
	font-weight: 400;
	font-display:swap
}
@font-face {
	font-family: 'Barlow';
	src: local('Barlow Bold'), local('Barlow-Bold'), url('../fonts/Barlow-Bold.woff') format('woff');
	font-style: normal;
	font-weight: 600;
	font-display:swap
}

/*控制*/
.ctrl_ {position:fixed; top:0; left:0px; padding:0px; z-index: 1; display:none}
.ctrl_ li {border:solid 1px #ddd; width:100px; margin:2px 0; cursor: pointer; padding:0px 3px}

.Skin_ctrl {width:100%; height: 80px; text-align: center}
.Skin_ctrl li {width:50px; display: inline-block; vertical-align: top; cursor: pointer; margin:0 5px}
.Skin_ctrl li>div {width:50px; height: 50px; padding:10px 0 0 0; transition:all 0.2s linear}
.Skin_ctrl li svg {border-radius:50%; width:30px; margin:0 auto; display: block; transition:all 0.2s linear}
.Skin_ctrl li span {display: block; font-size:14px; color:#666; margin-top:10px; transition:all 0.2s linear}
.Skin_ctrl li.active>div {padding:7px 0 0 0}
.Skin_ctrl li.active svg {width:36px; box-shadow: 0 3px 10px rgba(0,0,0,.10)}
.Skin_ctrl li.active span {font-weight: bolder; color:#333}

.Action_ctrl {position:fixed; bottom:0; left:0; width:100%; min-height:260px; text-align: center}
.Action_ctrl div.cover {position:absolute; top:0; left:0; width:100%; height:100%; display: none; z-index:1}
.Action_ctrl ul {padding:20px 0 60px; }
.Action_ctrl ul li {margin:15px 30% 0; display: inline-block}
.Action_ctrl ul li a {background:#fff; box-shadow:0 3px 15px rgba(0,0,0,.02); height:44px; line-height: 44px; padding: 0 40px; border-radius:22px; display: inline-block; cursor: pointer}

/*包裹层*/
.RunningdogWrap {width:100%; max-width:640px; margin:0px auto 0;}
.runningdog {width:100%; margin-top:-20px; transform:scale(1) ; }
/*骨骼*/
.bone {fill:none; opacity: 0; stroke-linecap:round;}
.bone_boldx {stroke:#000; stroke-width:6}
.bone_bolder {stroke:#000; stroke-width:5}
.bone_bold {stroke:#000; stroke-width:4}
.bone_main {stroke:#000; stroke-width:3;}
.bone_light {stroke:#444; stroke-width:2}
.bone_ear {stroke:#444; stroke-width:2; }
.bone_tongue {stroke:#f56363; stroke-width:2;}
.bone_lf {stroke:#666}
/*零件*/
.seg {opacity:1; stroke:#333; stroke-width:0}
.seg_main {fill:#333}
.seg_white {fill:#fff}
.seg_black {fill:#222}
.seg_tongue {fill:#f56363}
.seg_lf {fill:#282828}
/*.Jaw {fill:url(#Jaw)}*/

.Dog_shadow {fill:#666; fill-opacity:0.2}

/*地面*/
.ground {fill:none; stroke:#333; stroke-width:4px; stroke-miterlimit:5; stroke-linecap:round; stroke-dasharray:10px 20px; stroke-dashoffset:0px }
.ground2 {stroke:#999; stroke-width:3px; stroke-dasharray:10px 20px; stroke-dashoffset:0px}

/*DAN*/
.DAN {fill:#888; font-family:"Barlow"; font-size:24px}